<template>
  <div class="patient-info-container">
    <el-menu
      default-active="patientList"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item
        index="patientList"
        @click="handleRouteChange('patientList')"
        >患者列表</el-menu-item
      >
      <el-menu-item
        index="patientRecords"
        @click="handleRouteChange('patientRecords')"
        >诊断记录</el-menu-item
      >
      <el-menu-item
        index="appointmentManagement"
        @click="handleRouteChange('appointmentManagement')"
        >预约管理</el-menu-item
      >
    </el-menu>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  useRoute,
  useRouter,
  RouteLocationNormalized,
  Router,
} from "vue-router";
const route: RouteLocationNormalized = useRoute();
const router: Router = useRouter();

const selectedRoute = ref<string>(route.name as string);

const handleRouteChange = (routeName: string) => {
  selectedRoute.value = routeName;
  router.push({ name: routeName });
};
onMounted(() => {
  router.push("/user/patientInfo/patientList");
});
</script>

<style scoped>
.patient-info-container {
  padding: 20px;
  /* min-height: 100%; */
}

.el-menu-demo {
  margin-bottom: 20px;
}
</style>
